import React from 'react';
import { clsx } from 'clsx';

interface CardProps {
  children: React.ReactNode;
  className?: string;
  padding?: 'sm' | 'md' | 'lg' | 'none';
  shadow?: 'sm' | 'md' | 'lg' | 'xl' | 'none';
  variant?: 'default' | 'elevated' | 'interactive' | 'feature';
  hoverable?: boolean;
}

export const Card: React.FC<CardProps> = ({
  children,
  className,
  padding = 'md',
  shadow = 'sm',
  variant = 'default',
  hoverable = false
}) => {
  const paddingClasses = {
    none: '',
    sm: 'p-4',
    md: 'p-6',
    lg: 'p-8'
  };
  
  const shadowClasses = {
    none: '',
    sm: 'shadow-sm',
    md: 'shadow-md',
    lg: 'shadow-lg',
    xl: 'shadow-xl'
  };

  const variantClasses = {
    default: 'card-base',
    elevated: 'card-elevated',
    interactive: 'card-interactive',
    feature: 'card-feature'
  };

  const hoverClasses = hoverable ? 'hover-lift cursor-pointer' : '';

  return (
    <div className={clsx(
      'bg-white rounded-lg border border-gray-200',
      variant === 'default' && paddingClasses[padding],
      variant === 'default' && shadowClasses[shadow],
      variant !== 'default' && variantClasses[variant],
      hoverClasses,
      className
    )}>
      {children}
    </div>
  );
};

export default Card;